<!--
 * @Author: lucky
 * @Date: 2021-06-29 16:48:49
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-03 17:23:48
 * @Description: 
-->
<template>
  <div class="body">
    <div class="top-menu"></div>
    <div class="swipe">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="row" style="font-size: 25px">
      <van-icon @click="toOrder" name="balance-list" />
      <van-icon @click="toMoney" name="gold-coin" />
      <van-icon @click="toHelp" name="friends" />
      <van-icon @click="toMine" name="manager" />
    </div>
    <div class="row" style="font-size: 14px">
      <span @click="toOrder">订单</span>
      <span @click="toMoney">收益</span>
      <span @click="toHelp">帮助</span>
      <span @click="toMine">我的</span>
    </div>
    <h4 style="margin: 20px">我的订单</h4>
    <div
      v-for="item in orderData"
      :key="item.id"
      class="order"
      @click="toClick(item.id)"
    >
      <div>
        <van-image
          round
          width="4rem"
          height="4rem"
          :src="item.customer.userFace"
        />
      </div>
      <div class="order2">
        <div class="title">{{ item.customer.username }}</div>
        <div class="address">
          {{ item.address.province }}{{ item.address.city
          }}{{ item.address.area }}{{ item.address.address }}
        </div>
        <div>{{ moment(item.orderTime).format("YYYY-MM-DD hh:mm:ss") }}</div>
      </div>
      <div>
        <div class="status">{{ item.status }}</div>
        <div>{{ item.total }}</div>
      </div>
    </div>
    <!-- {{orderData}} -->
  </div>
</template>

<script>
import { pageQuery } from "@/api/order";
import moment from "moment";
import { info } from "@/api/user";
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      moment,
      orderData: [],
      params: {
        employeeId: 25,
        page: 1,
        pageSize: 10,
      },
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
    };
  },
  computed: {},
  methods: {
    toOrder() {
      this.$router.push({
        path: "/Order",
      });
    },
    toMoney() {
      this.$router.push({
        path: "/Money",
      });
    },
    toHelp() {
      this.$router.push({
        path: "/Help",
      });
    },
    toMine() {
      this.$router.push({
        path: "/Mine",
      });
    },
    async toQuery() {
      let token = getToken();
      // console.log(token);
      let mes = await info({ token });
      // console.log(mes);
      let res = await pageQuery({
        employeeId: mes.data.id,
        page: 1,
        pageSize: 10,
      });
      // console.log(res.data.id);
      this.orderData = res.data.list;
    },
    toClick(id) {
      // console.log(id);
      this.$router.push({
        path: "/IndexDetails",
        query: {
          index: id,
        },
      });
    },
  },
  created() {
    this.toQuery();
  },
  mounted() {},
};
</script>
<style scoped>
.body{
  width:100%;
  height: 617px;
  overflow: scroll;
}
.top-menu {
  width: auto;
  height: 130px;
  background-image: linear-gradient(to right, #ccffff, #CCFF66, #6699cc);
  border-radius: 0 0 30px 30px;
}
.swipe {
  /* background-color: violet; */
  position: relative;
  top: -70px;
}
.swipe img {
  display: block;
  width: 250px;
  height: 130px;
  margin: auto;
}
.row {
  display: flex;
  justify-content: space-around;
}
.order {
  display: flex;
  width: auto;
  height: 100px;
  box-shadow: 0px 0px 10px rgba(128, 128, 177, 0.5);
  /* border: 2px solid rgb(218, 211, 218); */
  justify-content: space-around;
  align-items: center;
  font-size: 13px;
  margin: 20px;
}
.order2 {
  width: 10rem;
}
.title {
  font-size: 15px;
}
.address {
  margin: 8px 0;
}
.status {
  margin-bottom: 26px;
  color: rgb(167, 110, 42);
}
</style>
